@charset "utf-8";

@import "reset";
@import "fonts";



@function r($px){
    @return $px/72px*1rem;
}

//登录页
.register_content{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.9);
    z-index: 70;
    color: #FFFFFF;
    overflow: scroll;
    transform: translatex(-100%);
}

//搜索框
.register_serve{
    padding: r(20px) 0;
    margin: 0 r(19px) 0 r(14px);
    border-bottom: 1px solid #524e4d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon-jiaochacross78{
        height: r(60px);
        width: r(60px);
        font-size: r(60px);
        line-height: r(60px);
        color: #ba0202;
    }
    .serve_frame{
        display: flex;
        flex-wrap: nowrap;
        width: r(545px);
        height: r(60px);
        border: 1px solid #fff;
        border-radius: r(30px);
        .icon-sousuo{
            height: r(58px);
            width: r(58px);
            text-align: center;
            line-height: r(58px);
            font-size: r(30px);
        }
        .serve_in{
            width: r(487px);
            height: r(58px);
            padding-left: r(33px);
            padding-right: r(10px);
            input{
                display: block;
                height: 100%;
                width: 100%;
                border: none;
                background-color: transparent;
                color: #fff;
                font-size: r(25px);
                &::placeholder{
                    color: #8e8e8e;
                    font-size: r(25px);
                }
            }
            
            
        }
    }
}

//点击登录
.register_select{
    padding: r(95px) 0 r(70px) 0;
    border-bottom: r(25px) solid #303030;
    text-align: center;
    .select_pic{
        display: block;
        height: r(145px);
        width: r(145px);
        margin: 0 auto;
        .pic_fra{
            height: 100%;
            width: 100%;
            overflow: hidden;
            border-radius: 50%;
            img{
                height: 100%;
                width: 100%;
            }
        }
    }
    a{
        
        display: block;
    }
    .select_button{
        margin-top: r(27px);
        font-size: r(28px);
        color: #fff;
    }
    .forget{
        margin-top: r(14px);
        font-size: r(22px);
        color: #535250;
        text-decoration: underline;
    }
}

//菜单

.register_menu{
    padding: r(22px) r(35px) 0;
    .tran_roate{
        transform: rotateZ(90deg);
    }
    .menu_content{
        padding: r(38px) 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: r(22px);
        border-bottom: 1px solid #343434;
    }
}


//登入页面
.signin_content{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.9);
    z-index: 999;
    color: #FFFFFF;
    overflow-y: scroll;
    overflow-x: hidden;
    transform: translateX(-100%);
    z-index: 80;
}

.signin_select{
    padding: r(36px) 0 0 0;
}

//头像
.select_pic{
    position: relative;
    span{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        height: r(38px);
        width: r(38px);
        border-radius: 50%;
        background-color: red;
        color: #fff;
        line-height: r(38px);
        text-align: center;
        font-size: r(20px);
    }
}

//个人中心
.my_center{
    font-size: r(27px);
    margin-top: r(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    a{
        display: inline-block;
        text-align: center;
        width: r(105px);
        height: r(25px);
        font-size: r(16px);
        line-height: r(25px);
        color: #fff;
        border: 1px solid #fff;
        vertical-align: middle;
        margin-left: r(11px);
    }
}

//星星

.sign_star{
    display: flex;
    justify-content: center;
    padding: r(11px) 0;
    i{
        margin-right: r(14px);
        color: #ecc200;
    }
}

//关注粉丝
.sign_fans{
    display: flex;
    justify-content: center;
    font-size: r(26px);
    a{
        position: relative;
        margin-left: r(11px);
        color: #fff;
        &:first-child span::after{
            content: "";
            display: inline-block;
            height: r(25px);
            width: 1px;
            background-color: #a4a39f;
            position: absolute;
            top: 4px;
            right: 0;
        }
        span{
            color: #9c0b12;
            padding: 0 r(11px);
        }
    }
}

//收藏，发布
.my_collect{
    display: flex;
    justify-content: center;
    padding: r(23px) 0;
    a{
        text-align: center;
        display: block;
        height: r(60px);
        line-height: r(60px);
        width: r(250px);
        font-size: r(26px);
        margin: 0 r(12px);
        border-radius: r(30px);
        background-color: #cdcdcd;
        color: #fff;
    }
    .red{
        background-color: #b70005;
    }
    
}

//折叠菜单内容
.hid_content{
    padding: 0 r(100px);
    text-align: center;
    .bot_bor{
        border-bottom: 1px solid #343434;
    }
    p{
        font-size: r(25px);
        padding: r(35px);
    }
}


//搜索框
.search_box{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(100%);
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgba(241,241,241,.9);
    z-index: 99;
    .search_out{
        width: 100%;
        height: r(98px);
        background-color: rgba(1f,1f,1f,.9);
        padding: r(20px) r(18px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            font-size: r(29px);
            color: #fff;
        }
        .search_frame{
            display: flex;
            flex-wrap: nowrap;
            width: r(615px);
            height: r(60px);
            border: 1px solid #fff;
            border-radius: r(30px);
            .icon-sousuo{
                height: r(58px);
                width: r(58px);
                text-align: center;
                line-height: r(58px);
                font-size: r(30px);
                color: #fff;
            }
            .serve_in{
                width: r(557px);
                height: r(58px);
                padding-left: r(33px);
                padding-right: r(10px);
                input{
                    display: block;
                    height: 100%;
                    width: 100%;
                    border: none;
                    background-color: transparent;
                    color: #fff;
                }
            }
        }
    }
}


.hot_search_title{
    padding: r(19px) r(34px);
    margin-top: r(17px);
    font-size: r(30px);
    color: #151515;
}

.hot_search_label{
    padding-left: r(29px);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li{
        height: r(62px);
        line-height: r(62px);
        padding: 0 r(22px);
        font-size: r(31px);
        border: 1px solid #e7e7e7;
        background-color: #fff;
        color: #888888;
        margin: 0 r(5px) r(23px);
    }
}
